{% extends 'base.html' %}
{% load static %}
{% block main %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container" style="margin-top:50px">
<form onsubmit="post(event)" id="form1">
    <div class="row mb-4">
      <div class="col">
        <div class="form-outline">
            <label class="form-label" for="first_name">First name</label>
          <input type="text" id="first_name" class="form-control" />
        </div>
      </div>
      <div class="col">
        <div class="form-outline">
            <label class="form-label" for="last_name">Last name</label>
          <input type="text" id="last_name" class="form-control" />
        </div>
      </div>
    </div>
  
    <!-- Email input -->
    <div class="form-outline mb-4">
        <label class="form-label" for="email">Email address</label>
      <input type="email" id="email" class="form-control" />
    </div>
  
    <!-- Password input -->
    <div class="form-outline mb-4">
        <label class="form-label" for="password">Password</label>
      <input type="password" id="password" class="form-control" />
    </div>
  
    <!-- Submit button -->
    <button type="submit" class="btn btn-primary btn-block mb-4">Next</button>
  
    <!-- Contact Panel -->
    <div class="text-center">
      <p>Contact Us:</p>
      <button type="button" class="btn btn-primary btn-floating mx-1">
        <i class="fab fa-facebook-f"></i>
      </button>
  
      <button type="button" class="btn btn-primary btn-floating mx-1">
        <i class="fab fa-google"></i>
      </button>
  
      <button type="button" class="btn btn-primary btn-floating mx-1">
        <i class="fab fa-twitter"></i>
      </button>
  
      <button type="button" class="btn btn-primary btn-floating mx-1">
        <i class="fab fa-github"></i>
      </button>
    </div>
  </form>

    <br>
    <form onsubmit="post2(event)" style="display:none" id="form2" enctype="multipart/form-data">
        {% csrf_token %}
        <!-- 2 column grid layout with text inputs for the first and last names -->
        <div class="row mb-4">
        <div class="col">
            <p id="errormessage"></p>
            <div class="form-outline">
                <label class="form-label" for="sop">Statement of Purpose (max 250 characters)</label>
            <textarea type="text" id="sop" class="form-control"  ></textarea>
            </div>
        </div>
        </div>
    
        <!-- File input -->
        <div class="form-outline mb-4">
            <label class="form-label" for="cv">Resume</label>
        <input type="file" id="cv" class="form-control" />
        </div>
    
        <!-- Submit button -->
        <button type="submit" class="btn btn-primary btn-block mb-4">Submit Application</button>
    
        <!-- Contact Panel -->
        <div class="text-center">
        <p>Contact Us:</p>
        <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-facebook-f"></i>
        </button>
    
        <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-google"></i>
        </button>
    
        <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-twitter"></i>
        </button>
    
        <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-github"></i>
        </button>
        </div>
    </form>
</div>


<script>
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function post(event){
        event.preventDefault();
        var first_name = document.getElementById('first_name').value;
        var last_name = document.getElementById('last_name').value;
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;

        axios.post('/job_apply/jobprofiles/', 
        {
            first_name: first_name,
            last_name: last_name,
            email: email,
            password: password
        },{headers:{"Content-Type" : "application/json"}})
        .then(function (response) {
            // handle success
            console.log(response);
        })
        .catch(function (error) {
            // handle error
            console.log(error.response.data);
        })
        .then(function () {
            document.getElementById('form2').style.display="block";
            document.getElementById('form1').style.display="none";
        });

    }
    function post2(event){
        event.preventDefault();
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        var sop = document.getElementById('sop').value;
        var cv = document.getElementById('cv').files[0];
        var id;
        var auth;
        //let csrftoken = Cookies.get("csrftoken");
        //let headers = {
        //    "X-CSRFToken": csrftoken,
        //};
        const csrfToken = getCookie('XSRF-TOKEN');
        console.log(csrfToken)
        axios.get('/job_apply/jobprofiles')
        .then(function (response) {
            // handle success
            console.log(response);
            // console.log(response.data[0]);
            for(var i=0;i<response.data.length; i++){
                if(response.data[i].first_name==="") continue;
                if(response.data[i].email===email) id=response.data[i].id;
            }
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(function () {
            var session_url = '/job_apply/login/';
            console.log(email);
            console.log(password);
            var uname = email;
            var pass = password;
            axios.post(session_url, {
                username: uname,
                password: pass                
            }
            ,{ headers: { 
                'X-CSRFToken': csrfToken, 
    
        }}
            ).then(function(response) {
            console.log('Authenticated');
            console.log('id',id);
            console.log(response.data);
            auth = response.data.token;
            console.log(auth)
            }).catch(function(error) {
            console.log("HERE ERROR X")
            console.log(error.response.data);

            })
            .then(function () {
                axios.post('/job_apply/applications/', 
                {
                    job_profile: id,
                    sop: sop,
                    status: "Applied",
                    cv: cv
                },
                {
                    headers: {
                        'Authorization': `Token ${auth}`,
                        'X-CSRFToken': csrfToken, 
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then(function (response) {
                    // handle success
                    console.log(response);


                })
                .catch(function (error) {
                    // handle error
                    console.log(error.response.data);
                    document.getElementById('errormessage').innerHTML = error.response;
                })
                .then(function () {
                    location.reload();
                });
            });
        })

    }

</script>
{% endblock %}